<template>
	<view class="storeBox" >
		<view class="topMenu">
			<view class="check" @click="goToPage('store')">
				<view class="">设置</view>
				<view class="hr"></view>
			</view>
		</view>
		<view class="content">
			<view class="list">
				<view class="title">门店logo</view>
				<view class="uploadContent">
					<u-upload ref="uUploadWithLogo" :auto-upload="false" :fileList="fileListWithLogo" :max-size="5 * 1024 * 1024" max-count="1" :show-progress="false"></u-upload>
				</view>
			</view>
			<view class="list">
				<view class="title">门店描述</view>
				<view class="inputContent"><u-input type="text" v-model="storeInfo.storeDescription" placeholder="请输入门店描述"></u-input></view>
			</view>
			<view class="list">
				<view class="title">门店名称</view>
				<view class="inputContent"><u-input type="text" v-model="storeInfo.storeName" placeholder="请输入门店名称"></u-input></view>
			</view>
			<view class="list addTimeList">
				<view class="title">营业时间</view>
				<!-- 二期放开 -->
				<!-- <view class="" @click="addTimeList">
					点击新增
				</view> -->
			</view>
			<view class="list timeList" v-for="(item, index) in timeList" :key="index">
				<view class="inputContent">
					<u-input type="text" :disabled="true" @click="showTimePicker(index, 'startTime')" v-model="item.startTime" placeholder="请选择开始时间"></u-input>
				</view>
				-
				<view class="inputContent">
					<u-input type="text" :disabled="true" @click="showTimePicker(index, 'endTime')" v-model="item.endTime" placeholder="请选择结束时间"></u-input>
				</view>
			</view>
			<!-- <view class="list">
				<view class="title">门店上午开始营业时间</view>

				<view class="inputContent">
					<u-input type="text" :disabled="true" @click="showTimePicker('businessHoursBegin')"
						v-model="storeInfo.businessHoursBegin" placeholder="请选择时间"></u-input>
				</view>
			</view>
			<view class="list">
				<view class="title">门店上午结束营业时间</view>
				<view class="inputContent">
					<u-input type="text" :disabled="true" @click="showTimePicker('businessHoursEnd')"
						v-model="storeInfo.businessHoursEnd" placeholder="请选择时间"></u-input>
				</view>
			</view>
			<view class="list">
				<view class="title">门店下午开始营业时间</view>
				<view class="inputContent">
					<u-input type="text" :disabled="true" @click="showTimePicker('startTime')"
						v-model="storeInfo.afternoonHoursBegin" placeholder="请选择时间"></u-input>
				</view>
			</view>
			<view class="list">
				<view class="title">门店下午结束营业时间</view>
				<view class="inputContent">
					<u-input type="text" :disabled="true" @click="showTimePicker('endTime')"
						v-model="storeInfo.afternoonHoursEnd" placeholder="请选择时间"></u-input>
				</view>
			</view> -->
			<view class="list">
				<view class="title">主营品类</view>
				<view class="inputContent">
					<u-input type="text" :disabled="true" placeholder="请选择品类" @click="showSelects('spec')" v-model="storeInfo.mainSpec"></u-input>
					<image class="arrow" src="https://www.yongshantuan.cn/images/yongshan/platformSide/downArrow.png" mode=""></image>
				</view>
			</view>
			<view class="list">
				<view class="title">门店资质上传</view>
				<view class="uploadContent">
					<u-upload ref="uUpload" :auto-upload="false" :fileList="fileListWithPicture" v-if='uploadContentShow' :max-size="1 * 1024 * 1024" max-count="6" :show-progress="false"></u-upload>
				</view>
			</view>
			<view class="list switchList">
				<view class="">是否营业(当前状态：{{ storeInfo.businessState }})</view>
				<view class=""><u-switch v-model="switchChecked" activeColor="#FA690A" @change="switchChange"></u-switch></view>
			</view>
			<view class="list">
				<view class="title">登录密码</view>
				<view class="inputContent"><u-input type="text" v-model="storeInfo.pass" placeholder="请输入门店登录密码" :clearable="false"></u-input></view>
			</view>
			<view class="commenButton" @click="submit">保存</view>
			<view class="commenButton editButton" @click="editLogin">退出登录</view>
		</view>
		<view class="selectBox">
			<u-popup mode="bottom" v-model="showSelect" :closeable="true">
				<view class="selectContent">
					<view class="title">{{ selectTitle }}</view>
					<view class="selList" v-for="(item, index) in specList" :key="index" @click="selectThis(index)">{{ item.name }}</view>
				</view>
			</u-popup>
		</view>
		<MyFooter :checkIndex="3"></MyFooter>
		<u-toast ref="uToast"></u-toast>
		<u-picker v-model="showTime" mode="time" :params="params" @confirm="confirm"></u-picker>
	</view>
</template>

<script>
import { getMyInfo, getMainCategories, editStoreInfo, changeStoreBusinessState } from '@/utils/req/api.js';
import MyFooter from '@/components/footer/footer.vue';
import mixinShareApp from '@/components/mixinShareApp/mixinShareApp.js';
export default {
	components: {
		MyFooter
	},
	mixins: [mixinShareApp],
	data() {
		return {
			showTime: false,
			params: {
				hour: true,
				minute: true,
				second: false
			},
			timeIndex: '',
			timeType: '',
			timeList: [
				{
					startTime: '',
					endTime: ''
				},
				{
					startTime: '',
					endTime: ''
				},
				{
					startTime: '',
					endTime: ''
				}
			],

			uploadContentShow: 1,
			fileListWithLogo: [],
			fileListWithPicture: [],
			tempListWithPicture: [],
			storeInfo: {},
			showSelect: false,
			specList: [],
			selectTitle: '',

			switchChecked: true
		};
	},
	
	// 分享到微信
	onShareAppMessage: function () {
		return this.shareApp();
	},
	  
	// 分享到朋友圈
	onShareTimeline () {
		return this.shareApp();
	},
	onLoad() {
		this.getMainCategories();
	},
	methods: {
		addTimeList() {
			this.timeList.push({
				startTime: '',
				endTime: ''
			});
		},

		async getMainCategories() {
			let res = await getMainCategories();
			this.specList = res.data.result;
			this.getMyInfo();
		},
		async getMyInfo() {
			let res = await getMyInfo();
			this.storeInfo = res.data.result;
			let { logo, storeInfoqualifications } = this.storeInfo;
			this.fileListWithLogo.push({
				url: this.$getImgUrl(logo)
			});
			console.log('this.storeInfo.qualifications', this.storeInfo.qualifications);
			if (this.storeInfo.qualifications) {
				this.storeInfo.qualifications.split(',').forEach(item => {
					if (item) {
						this.fileListWithPicture.push({
							url: this.$getImgUrl(item)
						});
					}
				});
			}
			console.log(this.fileListWithPicture, '-------------------');

			this.specList.forEach(item => {
				if (this.storeInfo.mainCategoriesId == item.id) {
					this.storeInfo.mainSpec = item.name;
				}
			});

			if (this.storeInfo.businessState == '营业') {
				this.switchChecked = true;
			} else {
				this.switchChecked = false;
			}
			this.timeList = JSON.parse(this.storeInfo.businessHours);
			if (this.timeList.length < 3) {
				for (let i = 0; i < 3 - this.timeList.length; i++) {
					this.timeList.push({
						startTime: '',
						endTime: ''
					});
				}
			}
		},
		showSelects(type) {
			this.selectType = type;
			this.selectTitle = '请选择品类';
			this.showSelect = true;
		},
		selectThis(index) {
			this.showSelect = false;
			console.log(this.specList);
			this.storeInfo.mainSpec = this.specList[index].name;
			this.storeInfo.mainCategoriesId = this.specList[index].id;
		},
		//展示时间选择picker
		showTimePicker(index, type) {
			this.timeIndex = index;
			this.timeType = type;
			this.showTime = true;
		},
		//时间选择picker确认选择
		confirm(e) {
			let time = e.hour + ':' + e.minute;
			this.$set(this.timeList[this.timeIndex], this.timeType, time);
		},
		async submit() {
			


			
			if (this.$refs.uUploadWithLogo.lists.length == 0) {
				this.$showToast.call(this, '请上传商店LOGO');
				return;
			}
			// if (!this.storeInfo.storeDescription) {
			// 	this.$showToast.call(this, '请填写门店描述');
			// 	return;
			// }
			if (!this.storeInfo.storeName) {
				this.$showToast.call(this, '请填写门店名称');
				return;
			}
			// if (!this.storeInfo.businessHoursBegin) {
			// 	this.$showToast.call(this, '请选择门店上午开始营业时间');
			// 	return;
			// }
			// if (!this.storeInfo.businessHoursEnd) {
			// 	this.$showToast.call(this, '请选择门店上午结束营业时间');
			// 	return;
			// }
			// if (!this.storeInfo.afternoonHoursBegin) {
			// 	this.$showToast.call(this, '请选择门店下午结束营业时间');
			// 	return;
			// }
			// if (!this.storeInfo.afternoonHoursEnd) {
			// 	this.$showToast.call(this, '请选择门店下午结束营业时间');
			// 	return;
			// }
			if (!this.timeList[0].startTime || !this.timeList[0].endTime) {
				this.$showToast.call(this, '请至少选择一个完成的营业时间段', 'warning');
				return;
			}
			let flag = false;
			for (let i = 0; i < this.timeList.length; i++) {
				if (this.timeList[i].startTime && this.timeList[i].endTime) {
					if (this.timeList[i].startTime == this.timeList[i].endTime) {
						console.log(this.timeList[i].startTime, this.timeList[i].endTime);
						flag = true;
						break;
					}
				}
			}
			if (flag) {
				this.$showToast.call(this, '开始营业时间和结束营业时间不能一样', 'warning');
				return;
			}

			if (!this.storeInfo.mainCategoriesId) {
				this.$showToast.call(this, '请选择门店主营品类');
				return;
			}
			
			// logo图片
			let url = this.$refs.uUploadWithLogo.lists[0].url;
			if (url.indexOf('blob:') > -1 || url.indexOf('://tmp') > -1) {
				let imgUploadRes = await this.$uploadFile(url);
				console.log(url, imgUploadRes)
				let { success, message } = JSON.parse(imgUploadRes.data);
				if (success) {
					this.storeInfo.logo = message;
				} else {
					this.$showToast.call(this, message, 'warning');
					return;
				}
			}
			
			// 资质图片
			if (this.$refs.uUpload.lists.length == 0) {
				this.submitInfo();
			} else {
				this.$refs.uUpload.lists.forEach(async item => {
					console.log('item.url----',item.url)
					if (item.url.indexOf('://tmp') == -1) {
						// if (item.url.indexOf('blob:') == -1) {
						// 已有的图片不上传
						this.tempListWithPicture.push(item.url);
					} else {
						// 新增的图片需上传
						let imgRes = await this.$uploadFile(item.url);
						let { success, message } = JSON.parse(imgRes.data);
						if (success) {
							console.log('资质上传成功，返回路径：', message);
							this.tempListWithPicture.push(message);
						} else {
							this.$showToast.call(this, message, 'warning');
							return;
						}
					}
				});
			}
		},
		async submitInfo() {
			this.storeInfo.qualifications = this.tempListWithPicture.join(',');
			let obj = JSON.parse(JSON.stringify(this.storeInfo));
			obj.businessHours = JSON.stringify(this.timeList);

			if (this.switchChecked) {
				obj.businessState = 0;
			} else {
				obj.businessState = 2;
			}

			let res = await editStoreInfo(obj);
			if (res.data.success) {
				this.$showToast.call(this, '设置成功');
				
				// 刷新资质图片列表数据
				let res = await getMyInfo();
				this.storeInfo = res.data.result;
				let list = []
				if (this.storeInfo.qualifications) {
					this.storeInfo.qualifications.split(',').forEach(item => {
						if (item) {
							list.push({
								url: this.$getImgUrl(item)
							});
						}
					});
				}
				this.fileListWithPicture = list;
				this.tempListWithPicture = [];
				
				this.uploadContentShow = false;
				this.$nextTick(() => {
					this.uploadContentShow = true;
				})
				
			} else {
				this.$showToast.call(this, res.data.message, 'warning');
			}
		},
		editLogin() {
			uni.removeStorageSync('token');
			uni.reLaunch({
				url: '/pages/index/index'
			});
		},
		async switchChange(e) {
			let res = await changeStoreBusinessState({
				id: this.storeInfo.id,
				businessState: this.switchChecked ? 0 : 2
			});
			this.$showToast.call(this, res.data.message, 'success');
			this.storeInfo.businessState = this.switchChecked ? '营业' : '打烊';
		}
	},
	watch: {
		tempListWithPicture(newVal) {
			console.log('666', newVal);
			console.log('newVal.length',newVal.length,'this.$refs.uUpload.lists.length',this.$refs.uUpload.lists.length)
			if (newVal.length == this.$refs.uUpload.lists.length && newVal.length > 0) {
				this.submitInfo();
			}
		},
		switchChecked(newVal) {
			console.log('888', newVal);
		}
	}
};
</script>

<style lang="scss" scoped>
.storeBox {
	background-color: #f5f5f5;
}

.topMenu {
	padding: 20rpx 0;
	background-color: #fff;
	padding: 20rpx;
	@include flexs(flex-start, flex-start);

	> view {
		margin-right: 30rpx;
		font-size: 40rpx;
		line-height: 56rpx;
		color: rgba(0, 0, 0, 0.35);

		> view:nth-child(2) {
			width: 40rpx;
			height: 8rpx;
			background: #fa690a;
			margin: 0 auto;
			margin-top: 10rpx;
			display: none;
		}
	}

	> .check {
		color: #000;

		> view:nth-child(2) {
			display: block;
		}
	}
}

.content {
	padding: 40rpx 32rpx;
	background-color: #fff;
	margin-top: 20rpx;
	padding-bottom: 150rpx;

	.editButton {
		margin-top: 40rpx;
		background-color: rgba(0, 0, 0, 0.15) !important;
	}

	.list {
		margin-bottom: 48rpx;

		.title {
			font-size: 24rpx;
			line-height: 1;
			margin-bottom: 16rpx;
		}

		.inputContent {
			position: relative;

			.arrow {
				width: 20rpx;
				height: 20rpx;
				position: absolute;
				right: 34rpx;
				top: calc((100% - 20rpx) / 2);
			}
		}

		.priceContent {
			> .alerdySelect {
				@include flexs();
				flex-wrap: wrap;
				margin-bottom: 20rpx;

				> view {
					font-size: 28rpx;
					line-height: 40rpx;
					padding: 24rpx 40rpx;
					background-color: #f5f5f5;
					border-radius: 12rpx;
					margin-right: 20rpx;
					margin-bottom: 10rpx;
				}
			}

			.addPriceControl {
				@include flexs();

				> .custom {
					width: 196rpx;
					height: 88rpx;
					padding: 24rpx 0;

					/deep/.u-input__input {
						font-size: 28rpx;
						line-height: 40rpx;
						height: 40rpx;
						min-height: auto !important;
						text-align: center;
					}
				}

				image {
					width: 40rpx;
					height: 40rpx;
					margin-left: 20rpx;
				}
			}
		}

		.fractionContent {
			@include flexs(space-between, center);

			> view {
				width: 28%;

				> view {
					&:nth-child(1) {
						font-size: 24rpx;
						line-height: 1;
						margin-bottom: 16rpx;
					}
				}
			}
		}
	}

	.addTimeList {
		@include flexs(space-between, center);
		margin-bottom: 0;

		> view:nth-child(2) {
			background-color: #fa690a;
			color: #fff;
			border-radius: 5rpx;
			font-size: 28rpx;
			line-height: 1.5;
			padding: 0 10rpx;
		}
	}

	.timeList {
		@include flexs(space-between, center);

		> view {
			width: 45%;
		}
	}

	.switchList {
		@include flexs(space-between, center);

		> view:nth-child(2) {
			font-size: 0;
		}
	}

	.commenButton {
		background-color: #fa690a;
	}
}

.selectContent {
	.title {
		font-size: 32rpx;
		line-height: 2;
		font-weight: bold;
		text-align: center;
		margin-bottom: 14rpx;
	}

	.selList {
		border-bottom: 1px solid rgba(0, 0, 0, 0.05);
		font-size: 28rpx;
		line-height: 40rpx;
		padding: 24rpx 0;

		&:last-child {
			border-bottom: 0;
		}
	}
}
</style>
<style lang="scss">
.selectBox {
	/deep/.u-drawer-bottom {
		width: 100% !important;
		padding: 36rpx 20rpx 40rpx 20rpx;
		border-top-left-radius: 40rpx;
		border-top-right-radius: 40rpx;
		min-height: 30vh;
	}
}

.list {
	/deep/.u-input__input {
		background-color: #f5f5f5;
		font-size: 28rpx;
		padding: 0 28rpx;
	}
}

.u-switch22 {
	width: 80rpx;
	height: 40rpx;

	/deep/.u-switch__node {
		width: 40rpx !important;
		height: 40rpx !important;
	}
}
</style>
